<template>
  <!-- 选择报名类型 -->
  <div>
    <div class="confirmInfo_title">报名选择</div>
    <div class="gameEntry_shadow">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col v-for="(item, index) in confirmInfo" :key="index" :span="8" class="confirmInfo_item">
          <div class="confirmInfo_item_filling gl_clear" :class="'item_'+ item.code" @click="chooseConfirmInfo(item, index)">
            <img class="align_middle" :src="item.img">
            <span class="confirmInfo_item_title align_middle">{{ item.name }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24" align="right">
        <!-- <el-button type="default" @click="clickGoback()">返回</el-button> -->
        <!-- <el-button :loading="nextLoading" type="primary" @click="clickNextStep()">下一步</el-button> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import entryIndividual from '@/assets/images/entry_individual.png';
import entryDelegation from '@/assets/images/entry_delegation.png';
export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 当前用户信息
    userInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      nextLoading: false,
      activeConfirmInfo: 0,
      currentUserType: '',
      confirmInfo: [
        {
          name: '个人报名通道',
          code: 'Personal',
          img: entryIndividual
        },
        {
          name: '代表队报名通道',
          code: 'Delegation',
          img: entryDelegation
        }
      ]
    };
  },
  methods: {
    chooseConfirmInfo (item, index) {
      const _gameSetting = this.gameInfo.setting;

      if (!_gameSetting) {
        this.$message({
          message: `赛事信息不全，无法继续操作！请联系赛事管理员！`,
          type: 'warning',
          showClose: true
        });
        return;
      }

      const _allowPersonalEntry = _gameSetting.allowPersonalEntry;
      const _code = item.code;
      if ((_code === 'Personal' && _allowPersonalEntry) || _code === 'Delegation') {
        this.currentUserType = item.code;
        this.activeConfirmInfo = index;
        this.doNextStep();
      } else {
        this.$message({
          message: `本次赛事不支持个人报名！`,
          type: 'warning',
          showClose: true
        });
      }
    },
    clickGoback () {
      this.$router.push({
        path: `/home/${this.$route.params.id}`
      });
    },
    // 执行下一步操作
    doNextStep () {
      this.$emit('onChangeCurrentUserType', this.confirmInfo[this.activeConfirmInfo], this.activeConfirmInfo);
      this.$emit('onNextStep');
    }
  }
};
</script>

<style lang="scss" scoped>
.confirmInfo_list_wrap {
  box-sizing: border-box;
  margin-bottom: 20px;
}
.confirmInfo_list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
}
.gameEntry_shadow {
  padding: 50px 0 130px;
}
.confirmInfo_item {
  position: relative;
  box-sizing: border-box;
  width: 380px;
  // height: 360px;
  border-radius: 8px;
}
.item_Personal {
  background: linear-gradient(135deg,#f65623, #fda675);
}
.item_Delegation {
  background: linear-gradient(135deg,#23aaf6, #75d4fd);
}
.confirmInfo_item_filling {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 34px 50px;
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.confirmInfo_item_title {
  margin-left: 60px;
}
.confirmInfo_img_wrap {
  box-sizing: content-box;
  position: relative;
  width: 108px;
  padding-top: 24px;
  height: 108px;
}
.confirmInfo_img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.img_mask {
  position: absolute;
  top: 23px;
  left: 0;
  box-sizing: border-box;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 6px solid rgba(25,47,89,0.46);
}
.confirmInfo_info {
  width: 196px;
  padding-top: 24px;
  margin-left: 132px;
}
.confirmInfo_info_title {
  width: 100%;
  padding: 12px 0;
  font-size: 20px;
  line-height: 28px;
  color: #353434;
}
.confirmInfo_info_desc,
.confirmInfo_info_type {
  width: 100%;
  padding: 4px 0;
  font-size: 14px;
  line-height: 20px;
}
.confirmInfo_item_edit {
  box-sizing: border-box;
  position: absolute;
  right: 24px;
  bottom: 13px;
  width: 64px;
  height: 30px;
  line-height: 28px;
  border-radius: 4px;
  font-size: 14px;
  color: #1890FF;
  text-align: center;
  cursor: pointer;
}
.noConfirmInfo {
  width: 100%;
  text-align: center;
  padding: 50px 0;
  text-align: center;
  color: #aaa;
}
.align_middle {
  vertical-align: middle;
}
</style>
